//@import "../../style/imports";
$item-img-size: 240px !default;

.page-package-goods {
  .package-goods {
    &__scroll {
      box-sizing: border-box;
      @include page-scroll(0, 0);
    }
    &__list {
    }
    &__item {
      margin-bottom: 30px;
      background: #fff;
      .goods-item {
        $self: &;
        display: flex;
        align-items: center;
        border-radius: $item-border-radius;
        overflow: hidden;
        margin: 0 0 $edge-margin * 2;
        position: relative;
        box-shadow: none;

        &__hd {
        }
        &__bd {
          background: #fff;
          display: flex;
          flex: 1;
          border-radius: $item-border-radius;
          overflow: hidden;
        }
        &__cont {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding: $edge-margin * 2 20px;
          flex: 1;
          height: auto;
        }
        &__caption {
          height: auto;
        }
        &__img {
          display: block;
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          &-wrap {
            position: relative;
            width: $item-img-size;
            height: $item-img-size;
            display: block;
            text-align: center;
          }
        }
        &__tag {
          margin: 0 0 10px;
          padding: 2px 4px;
          font-size: 20px;
          border-radius: 4px;
          border: 2px solid #ff5000;
          line-height: 1.4;
          color: #ff5000;
        }
        &__group {
          border: 2px solid #ff5000;
          border-radius: 4px;
          background: #ff5000;
          color: #fff;
        }
        &__title {
          margin: 0 0 10px;
          max-height: 80px;
          @include multi-ellipsis(2);
          line-height: 1.4;
          color: #111;
        }
        &__desc {
          margin: 0 0 10px;
          line-height: 1.4;
          @include multi-ellipsis(2);
          color: $color-gray;
          font-size: $font-size-small;
        }
        &__cur {
          padding-right: 5px;
          font-size: 20px;
        }
        &__price {
          font-size: floor(1.2 * $font-size);
          margin-right: 24px;
          color: $color-price;
          flex: none;
          //display: flex;
          .package-price {
            font-size: floor(1.2 * $font-size);
            margin-right: 24px;
            color: $color-price;
            display: inline;
          }
        }
        &__point {
          color: $color-brand-primary;
        }
        &__price-market {
          padding-left: 5px;
          font-size: $font-size-small;
          color: $color-gray;
          text-decoration: line-through;
        }

        &__extra {
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
        &__author {
          font-size: $font-size-small;
          color: #000;
          &-avatar {
            background: $color-bg-gray;
            width: 50px;
            height: 50px;
            border-radius: 50px;
            margin-right: 12px;
            display: inline-block;
            vertical-align: middle;
            overflow: hidden;
          }
          &-name {
            width: 140px;
            display: inline-block;
            vertical-align: middle;
            @include text-overflow();
          }
        }
        &__actions {
          color: #d0d0d0;
          font-size: $font-size-small;
          [class^='icon-'] {
            color: #d0d0d0;
            font-size: 36px;
            &:before {
              margin-right: 8px;
            }
          }
          .icon-star-on,
          .icon-like-on {
            color: $color-brand-primary;
          }
        }
      }
    }
  }
  .package-add-cart {
    display: block;
    height: 56px;
    line-height: 52px;
  }
}
